<template>
  <div class="container">
    <div class="main">
      <Whole></Whole>
    </div>
    <div class="tab-bar">
      <van-tabbar v-model="active">
        <van-tabbar-item>
         
          <span>首页</span>
          <template #icon="props">
            <img :src="props.active ? icon.active1 : icon.inactive1" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>全部</span>
          <template #icon="props">
            <img :src="props.active ? icon.active2 : icon.inactive2" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>想看</span>
          <template #icon="props">
            <img :src="props.active ? icon.active3 : icon.inactive3" />
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>我的</span>
          <template #icon="props">
            <img :src="props.active ? icon.active4 : icon.inactive4" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";
Vue.use(Tabbar);
Vue.use(TabbarItem);

import Whole from './movies/Whole'

export default {
  data() {
    return {
      active: 1,
      icon: {
        inactive1: require("../../assets/images/show1.png"),
        active1: require("../../assets/images/show2.png"),
        inactive2: require("../../assets/images/all1.jpg"),
        active2: require("../../assets/images/all2.jpg"),
        inactive3: require("../../assets/images/want1.jpg"),
        active3: require("../../assets/images/want2.jpg"),
        inactive4: require("../../assets/images/main1.jpg"),
        active4: require("../../assets/images/main2.jpg")
      }
    };
  },
  components: {
    Whole
  }
};
</script>

<style lang='stylus' scoped>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .main {
    flex: 1;
    overflow: hidden;
  }

  .tab-bar {
    height: 0.5rem;
  }
}
</style>